<template>
	<view class="volunteer">
		<view class="volunteer-box volunteer--box__service">
			<view class="volunteer-heading" @click="folded=!folded">
				<text class="text--main-dark">
					<slot></slot>
				</text>
				<image src="@/static/assist/collapsed.svg" class="icon collapsed" :class="{'active':folded}" ></image>
			</view>
			<view class="volunteer-requests" v-show="!folded">
				<FigureList 
				:figureList="requestList" 
				@deleteRequest="handleDeleteRequest"
				@checkRequest="handleCheckRequest"></FigureList>
			</view>
		</view>
	</view>
</template>

<script>
	import FigureList from "./FigureList.vue"
	export default {
		props:['requestList'],
		emits:['checkRequest','deleteRequest'],
		components:{
			FigureList
		},
		data(){
			return {
				folded:false,
			}
		},
		methods:{
			handleCheckRequest(item){
				console.log("-----handleCheckRequest-----")
				console.log(item)
				this.$emit('checkRequest',item)
			},
			handleDeleteRequest(item){
				this.$emit('deleteRequest',item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$color-black:#212529;
	$color-orange-light:#ff8d1a;
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 16px;
		font-weight: 600;
		color:#333;
	}
	
	.text--thirdary-dark{
		font-size: 14px;
		font-weight: 400;
		color:#333;
	}
	.volunteer{
		&-box{
			@include border-four-roundings;
			display: flex;
			flex-direction: column;
			gap:8px;
			
			padding:18px 16px;
			margin-bottom: 16px;
			
			transition:all 0.8s;
		}
	    &-heading{
			 display:flex;
			 justify-content: space-between;
			 
			 .collapsed{
				 transition:all 0.3s;
				 transform: rotate(0deg);
				 &.active{
					transform: rotate(90deg);
				}
			 }
			
		}
	}
	
</style>